<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.min.2.7.0.js"></script>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<!--
<input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值.
checkbox为复选框类型.
<span>标签被用来组合文档中的行内元素.    <br>是换行标签.
<label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
-->
<div id="app">
    <p>原始字符串: {{ message }}</p>
    <label>
        <input v-model.lazy="message">
    </label>
    <!--
    结论：
    v-html/v-text后面的属性会被当做一个变量
    v-html会解析这个变量内容，进而将他转变为特定格式
    v-text不会解析这个变量内容
    v-html/v-text块之间不能有内容，有内容则会被覆盖
    -->
    <div>
        <div v-html="innerHtml"></div>
        <div v-text="innerHtml" v-clock></div>
        <div v-clock>not work</div>
    </div>
    <!--<p v-show="isShow"><b>this is a test</b><button @click="hidenElement">这里应该是个按钮</button></p>-->

    <div id="box">
        <ul>
            <li v-for="(data,index) in datalist" :key="data.id|index">{{data.title}}</li>
        </ul>
    </div>
    <div id="boxing">
        <div>选择:{{count}}</div>
        <!--v-model里绑定的是下面数据的value内的data.id-->
        <label>
            <select size="1" v-model="count">
                <option v-for="(data,index) in datalist" :value="data.title" :key="data.id|index">{{data.title}}
                </option>
            </select>
        </label>
    </div>
    <div id="all">
        <div id="header" ref="vuetext"></div>
        <button @click="change">点击</button>
    </div>
    <div>
        <CurrentComp ref="value">11111</CurrentComp>
        <button @click="changeText">changeText</button>
    </div>
</div>
<script>
    Vue.component('CurrentComp', {
        template: "<div><button>{{displayText}}</button></div>",
        data: {displayText: 'click me!'}
    })
    new Vue({
        el: '#app',
        data: {
            count: null,
            isShow: true,
            message: 'this is a old test!',
            innerHtml: '<p v-show="isShow"><b>this is a test</b><button @click="hidenElement">这里应该是个按钮</button></p>',
            datalist: [
                {id: "1", title: "新闻"},
                {id: "2", title: "小说"},
                {id: "3", title: "动漫"},
            ],
        },
        methods: {
            hidenElement() {
                this.isShow = false
                console.log(`......`)
            },
            change() {
                if (this.$refs.vuetext.innerText === '点击') {
                    this.$refs.vuetext.innerText = '别点了'
                } else {
                    this.$refs.vuetext.innerText = '点击'
                }
            },
            changeText() {
                this.$refs.value.displayText = 'Hello world!'
                //  this.$refs['value'].displayText="hello world"
                console.log(`this.$refs.value.displayText>>>`, this.$refs.value.displayText)
            },
        },
        watch: {
            message: function (newVal, oldVal) {
                console.log('newVal:', newVal, ' oldVal:', oldVal)
            }
        }
    });
</script>
</body>
</html>